<template>
	<view class="p-b-180 m-b-180">
		<image src="https://www.shuyunpt.com/app/image//index/bg.png" class="w-750 h-500"></image>
		<view class="top-bg"></view>
		<view class="left-0 top-120 p-l-30 p-r-30 position-absolute p-b-180 m-b-180">
			<view class="c-white d-flex-items-center d-flex-between">
				<view class="d-flex-items-center w-150">
					<image src="https://www.shuyunpt.com/app/image//index/address-icon.png" class="w-30 h-30"></image>
					<view class="f-24 m-l-5 m-r-5 w-100 t_ellipsis_1">万达广场中心</view>
					<image src="https://www.shuyunpt.com/app/image//index/right.png" class="w-30 h-30"></image>
				</view>
				<view class="f-36 align-center">墅云城乡建设大平台</view>
				<view class="w-150"></view>
			</view>
			<view class="bgc-white w-690 h-80 br-24 m-t-20 d-flex-items-center m-b-20">
				<view class="w-32 h-32 m-l-26 m-r-12">
					<image src="https://www.shuyunpt.com/app/image//index/search.png" class="w-32 h-32   "></image>
				</view>
				<input type="text" placeholder="搜索内容" class="w-550" @confirm="search" v-model="keyWord">
			</view>
			<u-swiper :list="list" height="290" border-radius="40"></u-swiper>
			<view class="m-t-60 d-flex-between">
				<view class="d-flex-items-center">
					<view class="shu"></view>
					<view class="f-32 font-weight-bold m-l-10">{{first.name}}</view>
				</view>
				<view class="d-flex-items-center" @click="$jump.switchTab('/pages/tabbar/class/index')">
					<view class="c-77">更多</view>
					<image src="https://www.shuyunpt.com/app/image//index/right2.png" class="w-30 h-30"></image>
				</view>
			</view>
			<view class="w-690 bgc-white br-20 m-t-20 d-flex-wrap p-b-28 p-l-20 p-r-20 p-t-28">
				<view v-for="(item,index) in first.list" class="align-center w-25p"
					@click="$jump.navigateTo('/pages/shops/list?id=' + item.category_id + '&categoryName=' + encodeURIComponent(item.category_name))">
					<image :src="item.category_image" class="w-88 h-88 rounded-full"></image>
					<view class="m-t-16 f-30">{{item.category_name}}</view>
				</view>
			</view>
			<view class="m-t-40 d-flex-between m-b-20">
				<view class="d-flex-items-center">
					<view class="shu"></view>
					<view class="f-32 font-weight-bold m-l-10">{{send.name}}</view>
				</view>
				<view class="d-flex-items-center" @click="$jump.switchTab('/pages/tabbar/class/index')">
					<view class="c-77">更多</view>
					<image src="https://www.shuyunpt.com/app/image/index/right2.png" class="w-30 h-30"></image>
				</view>
			</view>
			<view class="d-flex-between d-flex-wrap">
				<view class="w-330 h-144  br-20 m-b-25 p-l-28 p-t-32 p-b-30 p-r-24 d-flex-between"
					v-for="(item,index) in send.list" :style="{'background':item.background}"
					@click="$jump.navigateTo('/pages/shops/list?id=' + item.category_id + '&categoryName=' + encodeURIComponent(item.category_name))">
					<view>
						<view class="c-33 font-weight-bold">{{item.category_name}}</view>
						<view class="c-77 f-24 m-t-5">{{item.category_desc}}</view>
					</view>
					<image :src="item.category_image" class="w-80 h-80"></image>
				</view>
			</view>
			<!-- 
			<view class="m-t-40 d-flex-between">
				<view class="d-flex-items-center">
					<view class="shu"></view>
					<view class="f-32 font-weight-bold m-l-10">{{third.name}}</view>
				</view>
				<view class="d-flex-items-center" @click="$jump.switchTab('/pages/tabbar/class/index')">
					<view class="c-77">更多</view>
					<image src="/static/image/index/right2.png" class="w-30 h-30"></image>
				</view>
			</view>
			<view class="w-690 bgc-white br-20 m-t-20 d-flex-wrap p-b-28 p-l-20 p-r-20 p-t-28">
				<view v-for="(item,index) in third.list" class="align-center w-25p" @click="$jump.navigateTo('/pages/shops/list?id=' + item.category_id + '&categoryName=' + encodeURIComponent(item.category_name))">
					<image :src="item.category_image" class="w-88 h-88"></image>
					<view class="m-t-16 f-30">{{item.category_name}}</view>
				</view>
			</view> 
			-->
			<view class="m-t-40 d-flex-between">
				<view class="d-flex-items-center">
					<view class="shu"></view>
					<view class="f-32 font-weight-bold m-l-10">{{four.name}}</view>
				</view>
				<view class="d-flex-items-center" @click="$jump.switchTab('/pages/tabbar/class/index')">
					<view class="c-77">更多</view>
					<image src="https://www.shuyunpt.com/app/image/index/right2.png" class="w-30 h-30"></image>
				</view>
			</view>
			<view class="w-690 bgc-white br-20 m-t-20 d-flex-wrap p-b-28 p-l-20 p-r-20 p-t-28">
				<view v-for="(item,index) in four.list" class="align-center w-25p  m-b-40"
					@click="$jump.navigateTo('/pages/shops/list?id=' + item.category_id + '&categoryName=' + encodeURIComponent(item.category_name))">
					<image :src="item.category_image" class="w-88 h-88 rounded-full"></image>
					<view class="m-t-16 f-30">{{item.category_name}}</view>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				first: {},
				send: {},
				third: {},
				four: {},
				keyWord: ""
			};
		},
		onShow() {
			this.getIndexInfo()
		},
		methods: {
			search() {
				if (!this.keyWord) return this.$hint.desc('请输入内容')
				// 跳转到商品列表页，传递搜索关键词，不指定分类ID表示搜索所有商品
				this.$jump.navigateTo('/pages/shops/list?id=0&keyWord=' + this.keyWord)
			},
			async getIndexInfo() {
				const res = await this.$service({
					url: "/api/member.index/getIndexInfo",
					method: "GET"
				})
				console.log(res);

				this.first = res.data.first.data
				this.send = res.data.send.data
				this.third = res.data.third.data
				this.four = res.data.four.data
				this.list = res.data.banner.map(res => {
					return {
						image: res.banner_image
					}
				})

			}
		},
	};
</script>

<style>
	page {
		background: #F6F8F9;
	}
</style>
<style scoped>
	.shu {
		width: 6rpx;
		height: 18rpx;
		background: #487DF4;
		border-radius: 60rpx 60rpx 60rpx 60rpx;
	}

	.top-bg {
		background: #2087FE;
		width: 750rpx;
		height: var(--status-bar-height);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
	}

	.rounded-full {
		border-radius: 25rpx;
	}
</style>